<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" >
    <title>文都掌办公</title>
    <link rel="stylesheet" href="login.css" >
</head>
<body>
<div class="my-container">
  <div class="my-avatar">
    <img src="login.png" />
  </div>
  <div class="my-title">
    文都掌办公
  </div>
  <form class="my-form">
    <div class="my-input">
      <input name="userid"/>
      <label class="my-label">账号：</label>
    </div>
    <div class="my-input">
      <input type="password" name="pwd" />
      <label class="my-label">密码：</label>
    </div>
    <div class="my-input">
      <input name="code"/>
      <img src="yzm.png" class="my-yzm" onclick="getYzm()" />
      <label class="my-label">验证码：</label>
    </div>
    <button type="button" class="my-button" onclick="login()">
      登 录
    </button>
  </form>
  <div class="my-bottom">
    大学里有棵树叫高数，很多人都挂在上面
  </div>
</div>
<script src="sweetalert2.js"></script>
<script>

  let key;
  function  getYzm(){
    key = Math.ceil(Math.random()*999999999999);
    document.querySelector(".my-yzm").src="yzm?key="+key;
  }

  getYzm();

  async function login(){
    let userid = document.querySelector("input[name=userid]").value;
    let pwd = document.querySelector("input[name=pwd]").value;
    let code = document.querySelector("input[name=code]").value;

    let params = "userid="+userid+"&pwd="+pwd+"&code="+code+"&key="+key;

    let response = await fetch('login',{
      method:"POST",
      headers:{
        "content-type":"application/x-www-form-urlencoded"
      },
      body:params
    });

    if(response.ok){
      let result = await response.text();
      switch (result){
        case "0":
          Swal.fire({
            toast:true,
            position:'top',
            icon:'success',
            title:'登录成功！',
            showConfirmButton: false,
            timer:3000
          });
          break;
        case "1":
          Swal.fire({
            toast:true,
            position:'top',
            icon:'error',
            title:'验证码错误！',
            showConfirmButton: false,
            timer:3000,
            background:'#FEE',
            color:'#D11'
          });
          break;
        case "2":
          Swal.fire({
            toast:true,
            position:'top',
            icon:'error',
            title:'账号或密码错误！',
            showConfirmButton: false,
            timer:3000,
            background:'#FEE',
            color:'#D11'
          });
          break;
      }
    }
  }
</script>

</body>
</html>